import React from 'react';
import { Swiper } from 'react-vant';
import styles from './index.module.css'
import 'react-vant/lib/index.css'
import useCityReducer from '../Reducers';
import { Outlet, NavLink } from 'react-router-dom'
const Index = () => {
    const [state]=useCityReducer()
    return (
        <div className={styles.Nav}>
            <Swiper className="my-swipe" autoplay={3000}>
                <Swiper.Item>
                    <img className={styles.img} src="https://static.maizuo.com/v5/upload/b7c056fa2ec0df3702b526f7535ab493.jpg?x-oss-process=image/quality,Q_70" alt=""/>
                </Swiper.Item>
                <Swiper.Item>
                    <img className={styles.img}  src="https://static.maizuo.com/v5/upload/7572cf53619677bedf1a657b0d295afc.jpg?x-oss-process=image/quality,Q_70" alt="" />
                </Swiper.Item>
                <Swiper.Item>
                    <img className={styles.img}  src="https://static.maizuo.com/v5/upload/f6cc1510a17ce3d424fac9a88c87db03.jpg?x-oss-process=image/quality,Q_70" alt="" />
                </Swiper.Item>
            </Swiper>
            <div >
                <NavLink to="/city">
                    <button className={styles.cityBtn}>{state.city}</button>
                </NavLink>
            </div>

            <div className={styles.content}>
                <div><NavLink to="/movie/top250" className={styles.navTitle}>正在热映</NavLink></div>
                <div><NavLink to="/movie/comingsoon" className={styles.navTitle}>即将上映</NavLink></div>
            </div>
            <Outlet></Outlet>
        </div>
    );
}

export default Index;
